项目瘦身与 CLI 工具：需求分析与模板架构设计
概述
项目瘦身的目标是将臃肿的模板项目拆分为可组合的功能模块，通过 CLI 工具按需生成项目模板。本节分析 CLI 的需求模型，并借鉴 create-vue 的架构思路设计模板组织方案。
CLI 需求模型
两种模板组织策略
| 策略 | 描述 | 优点 | 缺点 |
|---|---|---|---|
| 全量包含 | 每个选项包含完整代码 | 简单直接 | 代码冗余，维护困难 |
| 基础+扩展 | 公共部分抽离为 base，各选项做增量扩展 | 复用度高，易维护 | 需要合并逻辑 |
推荐采用基础+扩展策略，参考 create-vue 的模板架构：
templates/
├── base/ # 基础项目骨架
│ ├── package.json
│ ├── vite.config.ts
│ ├── src/
│ └── tsconfig.json
├── css-framework/ # CSS 框架选项
│ ├── unocss/ # UnoCSS 配置
│ └── tailwindcss/ # TailwindCSS 配置
├── electron/ # Electron 选项
│ ├── main.ts
│ └── preload.ts
├── cdn/ # CDN 选项
│ └── vite.config.ts
└── router/ # 路由选项
├── auto/ # 自动路由
└── manual/ # 手动路由
text
create-vue 架构参考
create-vue/
├── template/
│ ├── base/ # 基础代码库
│ ├── config/
│ │ ├── eslint/ # ESLint 配置模板
│ │ ├── prettier/ # Prettier 配置模板
│ │ └── tsconfig/ # TypeScript 配置
│ ├── code/
│ │ ├── pinia/ # 状态管理
│ │ ├── router/ # 路由
│ │ └── vitest/ # 测试框架
│ └── tsconfig/ # TypeScript 配置选项
├── package.json
└── create-vue.ts # CLI 入口
text
关键设计要点：
- 使用 pnpm workspace 管理模板之间的共享依赖
base模板提供最小可运行的项目骨架- 各功能模块模板仅包含增量文件（差异部分）
- 选项之间存在重叠时，共享同一基础模板
模板合并原理
CLI 执行流程:
1. 交互式问答 → 收集用户选择
2. 初始化 base 模板 → 创建基础项目
3. 逐个合并选中功能模块 → 覆盖/追加文件
4. 执行后处理 → 安装依赖、初始化 Git
text
// CLI 核心逻辑示意
async function createProject(options: CliOptions) {
const { projectName, features } = options
// 1. 复制 base 模板
await copyTemplate('base', projectName)
// 2. 合并功能模块
for (const feature of features) {
await mergeTemplate(feature, projectName)
}
// 3. 合并 package.json 依赖
await mergePackageJson(projectName, features)
// 4. 安装依赖
await installDependencies(projectName)
}
typescript
项目瘦身实践
对现有模板项目做减法，拆分步骤：
- 识别功能模块：梳理每个文件/目录归属的功能域
- 抽离 Electron 相关：
build/resources/electron、src/main、electron配置文件 - 抽离 CDN 相关：CDN 插件配置、外部依赖声明
- 抽离 CSS 框架：UnoCSS/TailwindCSS 配置与样式文件
- 保留基础骨架：最小可运行的 Vite + Vue 3 项目
瘦身前:
admin-template/
├── build/
├── electron/ → 拆分到 templates/electron/
├── src/
│ ├── main/ → 拆分到 templates/electron/
│ └── ...
├── vite.config.ts → 基础配置保留，CDN 部分拆分
└── package.json → 基础依赖保留，electron 依赖拆分
瘦身后:
templates/base/
├── src/
├── vite.config.ts # 精简后的基础配置
└── package.json # 仅基础依赖
text
实践要点
- 虽然可以用
git reset回退代码，但使用独立模板目录的目的是为 CLI 工具提供结构化的模板源 - 模板拆分时注意
package.json中 scripts 的差异，不同功能模块可能需要不同的构建脚本 - 参考
create-vue的package.json了解 CLI 工具的标准入口文件结构 - 先完成减法（拆分），再做加法（CLI 工具整合）
↑